<template>
	<div class="resource-detail">
		<div class="resource-info">
			<div class="title">资源信息</div>
			<el-table
				:data="infoData"
				:cell-style="{ 'text-align': 'center' }"
				:header-cell-style="{ 'text-align': 'center' }"
				stripe
			>
				<el-table-column label="资源名称">
					<template slot-scope="scope">
						<el-popover
							placement="top-start"
							width="300"
							trigger="hover"
							:content="scope.row.resourceName"
						>
							<span slot="reference">{{ scope.row.resourceName }}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="科目" prop="proName">
					<template slot-scope="scope">
						<el-popover
							placement="top-start"
							width="600"
							trigger="hover"
							:content="scope.row.proName"
						>
							<span slot="reference">{{ scope.row.proName }}</span>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="isShelve" label="上下架" width="100">
					<template slot-scope="scope">{{ scope.row.isShelve|veDict('isShelve') }}</template>
				</el-table-column>
				<el-table-column prop="id" label="资源id" />
				<el-table-column prop="professorName" label="授课老师" />
			</el-table>
		</div>
		<div class="resource-info table">
			<div class="title">
				<span>应用位置</span>
				<span class="theme_font_color">课程中心</span>
			</div>
			<div v-loading="isLoading">
				<el-table
					:data="appData"
					:cell-style="{ 'text-align': 'center' }"
					:header-cell-style="{ 'text-align': 'center' }"
					stripe
				>
					<el-table-column prop="coursewareName" label="课件名称">
						<template slot-scope="scope">
							<el-popover
								placement="top-start"
								width="300"
								trigger="hover"
								:content="scope.row.coursewareName"
							>
								<span slot="reference">{{ scope.row.coursewareName }}</span>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column prop="projectName" label="项目" />
					<el-table-column prop="subjectNames" label="科目">
						<template slot-scope="scope">
							<el-popover
								placement="top-start"
								width="300"
								trigger="hover"
								:content="scope.row.subjectNames"
							>
								<span slot="reference">{{ scope.row.subjectNames }}</span>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column prop="pypYear" label="年份" width="100" />
					<el-table-column prop="pypSeq" label="周期" width="100">
						<template slot-scope="scope" v-if="scope.row.pypSeq">
							{{ scope.row.pypSeq }}
							<span>期</span>
						</template>
					</el-table-column>
					<el-table-column prop="modulType" label="模块类型" />
					<el-table-column prop="modulName" label="模块名称" />
					<el-table-column prop="courseName" label="课程目录" />
					<el-table-column label="篇章" prop="catalog">
						<template slot-scope="scope">
							<el-popover
								placement="top-start"
								width="300"
								trigger="hover"
								:content="scope.row.catalog"
							>
								<span slot="reference">{{ scope.row.catalog }}</span>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
				<ve-pagination :get-page="getPage" :page.sync="page" />
			</div>
		</div>
	</div>
</template>

<script>
	import coursewareApi from "@rc/apis/rc/courseware.mjs";
	export default {
		name: "resource-detail",
		data() {
			return {
				infoData: [], //资源信息
				appData: [], //应用位置
				page: {
					pageIndex: 1,
					pageSize: 10,
					pageCount: 10
				},
				isLoading: true,
				queryId: ""
			};
		},
		methods: {
			//获取资源信息
			queryUseDetail(id) {
				let params = {};
				params.resourceId = id;
				coursewareApi.getResourceInfo({
					data: params,
					success: (res) => {
						//拼接科目
						let proName = "";
						res.rcResourceVideoProjectSubjectResponseVo.forEach((item) => {
							proName = proName + item.projectName + "-" + item.subjectName + "、";
						});
						proName = proName.substring(0, proName.length - 1);
						res.proName = proName;
						//拼接资源名称
						let resourceName = "";
						resourceName = "第" + res.sectionNumber + "节课 " + res.name;
						res.resourceName = resourceName;
						this.infoData = [];
						this.infoData.push(res);
					},
					complete: () => {}
				});
			},
			//获取课程中心信息
			queryClassInfo(id) {
				let params = {};
				params = {
					resourceId: id,
					pageIndex: PageUtil.getStartIndex(this.page),
					pageSize: this.page.pageSize
				};
				coursewareApi.queryUseDetail({
					data: params,
					success: (res) => {
						this.appData = res.data;
						this.appData.forEach((item) => {
							item.catalog = item.catalogName + "(备注:" + (item.catalogRemark || "") + ")";
						});
						this.page.pageCount = res.count;
					},
					complete: () => {
						this.isLoading = false;
					}
				});
			},
			//分页
			getPage() {
				this.queryClassInfo(this.queryId);
			}
		},
		created() {
			this.queryId = this.$route.query.id;
			this.queryUseDetail(this.queryId);
			this.queryClassInfo(this.queryId);
		},
        beforeRouteLeave(to, from, next) {
            to.meta.fromPage = "relevance-detail";
            to.meta.pageIndex = Number(this.$route.query.pageIndex);
            next();
        },
	};
</script>

<style lang="less" scoped>
	.resource-detail {
		box-sizing: border-box;
		height: 100%;
		background-color: #f4f5f9;
		padding: 0 16px 16px;
		.resource-info {
			background-color: #fff;
			margin-bottom: 16px;
			padding: 0 21px 16px 16px;
			position: relative;
			border-radius: 2px;
			&::after {
				position: absolute;
				display: block;
				content: "";
				width: 5px;
				height: 19px;
				background: linear-gradient(48deg, #ff6437, #ffbba2 100%);
				border-radius: 0px 4px 4px 0px;
				left: 0px;
				top: 18px;
			}
			&.table {
				min-height: calc(100% - 201px);
			}
			.title {
				color: #3a3d4b;
				font-weight: 700;
				font-size: 16px;
				height: 55px;
				line-height: 55px;
				border-bottom: 1px dashed #f0f0f0;
				margin-bottom: 16px;
			}
		}
	}
	.el-table {
		/deep/.cell {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			span {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>
